<!--  -->
<template>
  <div class="bg">
    <van-nav-bar
      class="navbarSty"
      title="邀请好友"
      fixed
      left-arrow
      :border="false"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="mainbg">
      <div style="display: flex; justify-content: center">
        <img
          class="btnSty"
          @click="alertshow = true"
          src="../../assets/img/home/invitedbtn.png"
          alt
        />
      </div>
      <div class="listSty">
        <p class="htit">
          <img
            class="yuan"
            src="../../assets/img/home/yuan.png"
            alt
          />我推荐的会员
          <img class="yuan" src="../../assets/img/home/yuan.png" alt />
        </p>
        <img
          v-if="data_length"
          class="empty"
          src="../../assets/img/home/empty.png"
          alt
        />
        <div class="cell">
          <van-cell-group
            :border="false"
            v-for="(item, index) in data.share_user"
            :key="index"
          >
            <van-cell class="border" :title="item.mobile" :value="item.date" />
          </van-cell-group>
        </div>
      </div>
    </div>
    <!-- 遮罩层 -->
    <van-overlay :show="alertshow">
      <div class="wrapper" @click.stop>
        <div style="margin-top: 40px">
          <img class="alertbg" src="../../assets/img/home/alertbg.png" alt="" />
          <img
            class="btn_know"
            @click="alertshow = false"
            src="../../assets/img/home/btn_know.png"
            alt=""
          />
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Fetch from "../../utils/fetch";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "invited",
  },
  data() {
    //这里存放数据
    return {
      value: "",
      list: [],
      loading: false,
      finished: false,
      alertshow: false,
      data: {},
      is_show_share: false,
      data_length: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onClickLeft() {
      history.go(-1);
    },
    onClickRight() {
      Toast("按钮");
    },
    start() {
      Fetch("/user/info/share").then((res) => {
        this.data = res.data;
        if (res.data.share_user.length == 0) {
          this.data_length = true;
        }
      });
    },
    // onLoad() {
    //   // 异步更新数据
    //   // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //   setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //       this.list.push(this.list.length + 1);
    //     }

    //     // 加载状态结束
    //     this.loading = false;

    //     // 数据全部加载完成
    //     if (this.list.length >= 40) {
    //       this.finished = true;
    //     }
    //   }, 1000);
    // }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.start();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.bg {
  width: 100%;
  height: calc(100% - 50px);
  margin-top: 40px;
  background: #a20b18;
  /* height: 100%; */
  /* background: #158de9; */
  /* padding-bottom: 20px; */
}
.bg .van-nav-bar {
  background: #a20b18;
  // box-shadow: 0 0.026667rem 0.053333rem 0 #a20b18;
}
.mainbg {
  width: 100%;
  /* height: 785px; */
  padding-bottom: 20px;
  background: url("../../assets/img/home/invitedbg.png") no-repeat;
  background-size: 100% 100%;
}
.btnSty {
  width: 324px;
  height: 153px;
  margin-top: 180px;
  /* margin: auto; */
  /* display: block; */
}
.listSty {
  width: 355px;
  /* background: #fff; */
  height: 442px;
  overflow-y: scroll;
  margin: auto;
  background: url("../../assets/img/home/listbg.png") no-repeat;
  background-size: 100% 100%;
  padding-bottom: 10px;
}
.htit {
  display: flex;
  height: 80px;

  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.yuan {
  width: 17px;
  height: 17px;
  margin: 0 6px;
}
.empty {
  width: 174px;
  height: 174px;
  display: block;
  margin: auto;
}

.alertbg {
  width: 271px;
  height: 482px;
  display: block;
  margin: auto;
}
.btn_know {
  width: 238px;
  height: 87px;
  display: block;
  margin: auto;
}
.border {
  border-bottom: 1px solid #fff8ee;
}
.cell {
  margin: 0 5px;
  height: calc(100% - 80px);
  overflow: auto;
}
/deep/.van-nav-bar .van-icon {
  color: #ffffff;
}
/deep/.van-nav-bar__title {
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  color: #ffffff;
}
</style>